<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>启动app</title>
    <style>
        .contenter {
            width: 70%;
            height: auto;
            border-radius: 5px;
            background-color: blanchedalmond;
            /* border: 1px solid red; */
            margin: 0 auto;
            margin-top: 50px;
        }

        .title {
            width: 100%;
            height: 50px;
            background-color: #0dcaf0;
            font-size: 20px;
            border-radius: 5px 5px 0 0;
            color: white;
        }

        .sub_content {
            width: 100%;
            min-height: 550px;
        }

        .select_sub {
            width: 100%;
            height: 50px;
            /* display: flex; */
            margin-top: 40px;
            outline: none;
            border-radius: 10px;
            margin-left: 20px;
        }
        .select {
            width: 100px;
            height: 30px;
            border-radius: 5px;
            margin-right: 10px;
        }
        .sub {
            width: 60px;
            height: 30px;
            background-color: #0dcaf0;
            border: 0;
            color: white;
            border-radius: 5px;
            cursor: pointer;
        }

        input,select {
            outline: none;
            border: none;
        }

        .param-container {
            /* border: 1px solid #ddd; */
            /* padding: 10px; */
            /* margin-top: 20px; */
            border-radius: 5px;
            margin-left: 20px;
            margin-bottom: 20px;
            /* background-color: #f9f9f9; */
        }

        .param-container h3 {
            margin: 0 0 10px 0;
            font-size: 16px;
            color: #333;
        }
        .input_parm {
            width: 100px;
            border-radius: 5px;
            height: 28px;
        }

        #sel3{
            width: 50px;
            height: 29px;
            border-radius: 5px;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }

        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }

        th {
            background-color: #f2f2f2;
        }
    </style>
</head>
<body>
    <div class="contenter">
        <div class="title">
            <p style="padding: 10px; margin-left: 10px;">启动应用</p>
        </div>
        <div class="sub_content">
            <div class="select_sub">
                <select name="sel1" id="sel1" class="select">
                    <option value="">请选择机器人</option>
                </select>
                <select name="sel2" id="sel2" class="select" disabled>
                    <option value="">请选择程序</option>
                </select>
                <input type="submit" value="提交" class="sub">
            </div>

            <!-- Parameter Input Section -->
            <div class="param-container">
                <!-- <h3>添加参数</h3> -->
                <input type="text" id="name" placeholder="参数名称" class="input_parm"/>
                <select name="sel3" id="sel3">
                    <option value="str">str</option>
                    <option value="int">int</option>
                    <option value="bool">bool</option>
                    <option value="file">file</option>
                    <option value="float">float</option>
                </select>
                <input type="text" id="parm_value" placeholder="参数值" class="input_parm">
                <input type="button" value="添加参数" class="sub" id="addParamBtn"/>
            </div>

            <hr/>
            <!-- Parameters Table -->
            <div>
                <table id="paramsTable">
                    <thead>
                        <tr>
                            <th>参数名称</th>
                            <th>参数类型</th>
                            <th>参数值</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <!-- Parameter rows will be added here -->
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <!-- Include jQuery -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $(document).ready(function() {
            // Fetch robots data using $.ajax
            $.ajax({
                url: 'robot.json',
                type: 'GET',
                dataType: 'json',
                success: function(robots) {
                    if (robots && robots.length > 0) {
                        // Populate the robot dropdown
                        robots.forEach(robot => {
                            $('#sel1').append(`<option value="${robot.id}">${robot.name}</option>`);
                        });
                    } else {
                        $('#sel1').append('<option value="">没有可用的机器人</option>');
                    }
                },
                error: function() {
                    console.error('Failed to fetch robots data.');
                    $('#sel1').append('<option value="">无法加载机器人数据</option>');
                }
            });

            // Handle robot selection
            $('#sel1').change(function() {
                const robotId = $(this).val();
                if (robotId) {
                    $('#sel2').prop('disabled', false).empty().append('<option value="">加载中...</option>');

                    // Fetch programs data using $.ajax
                    $.ajax({
                        url: 'app.json',
                        type: 'GET',
                        dataType: 'json',
                        success: function(programs) {
                            const selectedPrograms = programs[robotId] || [];
                            if (selectedPrograms.length > 0) {
                                $('#sel2').empty().append('<option value="">请选择程序</option>');
                                selectedPrograms.forEach(program => {
                                    $('#sel2').append(`<option value="${program}">${program}</option>`);
                                });
                            } else {
                                $('#sel2').empty().append('<option value="">没有可用的程序</option>');
                            }
                        },
                        error: function() {
                            console.error('Failed to fetch programs data.');
                            $('#sel2').empty().append('<option value="">无法加载程序数据</option>');
                        }
                    });
                } else {
                    // If no robot is selected, disable the program dropdown
                    $('#sel2').prop('disabled', true).empty().append('<option value="">请选择程序</option>');
                }
            });

            // Add parameter to the table
            $('#addParamBtn').click(function() {
                const paramName = $('#name').val();
                const paramType = $('#sel3').val();
                const paramValue = $('#parm_value').val();

                if (paramName && paramType && paramValue) {
                    const row = `<tr>
                        <td>${paramName}</td>
                        <td>${paramType}</td>
                        <td>${paramValue}</td>
                        <td><button class="sub deleteParamBtn">删除</button></td>
                    </tr>`;
                    $('#paramsTable tbody').append(row);

                    // Clear input fields
                    $('#name').val('');
                    $('#parm_value').val('');
                } else {
                    alert('请填写所有参数字段。');
                }
            });

            // Delete parameter from the table
            $('#paramsTable').on('click', '.deleteParamBtn', function() {
                $(this).closest('tr').remove();
            });
        });
    </script>
</body>
</html>